<template>
  <ex-dialog width="500px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <div class="main">
      <div class="shenye_box" v-if="pathType == 'shenye'">
        <div class="imgBox" >
          <img :src="data.shenyeQrCode" alt="">
          <div class="txt">神椰收款码</div>
          <el-button type="primary" @click="download(data.shenyeQrCode,1)" :loading="loading">下载</el-button>
        </div>
        <div class="imgBox">
          <img :src="data.shenyeStoreQrCode" alt="">
          <div class="txt">神椰店铺码</div>
          <el-button type="primary" @click="download(data.shenyeStoreQrCode,2)" :loading="loading">下载</el-button>
        </div>
      </div>
      <div class="imgBox" v-if="pathType == 'zijin'">
        <img :src="data.payQrCode" alt="">
        <div class="txt">{{data.payNo}}</div>
        <div class="txt">卡优优收款码</div>
        <el-button type="primary" @click="download(data.payQrCode,3)" :loading="loading">下载</el-button>
      </div>
      <div class="imgBox" v-if="pathType == 'kyydianpu'">
        <img :src="data.kyyStoreQrCode" alt="">
        <div class="txt">卡优优店铺码</div>
        <el-button type="primary" @click="download(data.kyyStoreQrCode,4)" :loading="loading">下载</el-button>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";

  // api
  import {
    moduleOpen
  } from "@/api/merchants/merchantsFunction";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
      pathType: String,
      data: Object,
      shopName: String
    },
    data() {
      return {
        title: '查看',
        input: "",
        type: '',
        ruleForm: {
          account: '', //手机号
          password: '', //密码
          function: '',
        },
        rules: {
          account: [{
            required: true,
            message: '请填写手机号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],

        }
      };
    },
    computed: {},
    created() {
      let query = this.$route.query;
      this.id = query.id
      this.type = query.type

    },
    methods: {
      downloadIamge(imgsrc, name) {
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window
        }); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = imgsrc; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      },
      download(code,status) {
        let title = ''
        if(status==1){
          title = '(' + this.data.shopName + '）' + '神椰收款码.png'
        }else if(status==2){
          title = '(' + this.data.shopName + '）' + '神椰店铺码.png'
        }else if(status==3){
          title = '(' + this.data.shopName + '）' + '卡优优收款码.png'
        }else if(status==4){
          title = '(' + this.data.shopName + '）' + '卡优优店铺码.png'
        }
        this.downloadIamge(code, title);
      },

      handleClose() {
        this.$emit("update:visible", false);
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .main {
    .text {
      line-height: 1.6;
      margin-top: 14px;
    }

    .inp {
      margin-top: 12px;
    }

    .btn {
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }
  }
  .shenye_box{
    display: flex;
    justify-content: space-around;
    padding-bottom: 20px;
  }
  .imgBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;

    img {
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
    }

    .txt {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 14px;
    }
  }

</style>
